<template>
  <el-card style="margin: 20px 0px">
    <div class="top">
      <!-- 选项卡 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="访问量" name="visite"></el-tab-pane>
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
      </el-tabs>
      <div class="right">
        <span @click="setToday">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span>
        <span @click="setYear">本年</span>
        <!--日历
          value-format:收集数据格式的设置
        -->
        <el-date-picker
          v-model="arr"
          type="daterange"
          range-separator="-"
          start-placeholder="入住日期"
          end-placeholder="离开日期"
          size="mini"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="bottom">
      <el-row :gutter="20">
        <el-col :span="16" :offset="0">
          <!--柱状图-->
          <div class="charts" ref="bar"></div>
        </el-col>
        <!--右侧滚动组件-->
        <el-col :span="8" :offset="0">
          <Scroll :data="listData" class="seamless-warp">
            <ul class="item">
              <li v-for="(item, index) in listData" :key="index">
                <span class="title" v-text="item.title"></span
                ><span class="date" v-text="item.date"></span>
              </li>
            </ul>
          </Scroll>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
//引入插件echarts
import * as echarts from "echarts";
import dayjs from "dayjs";
//引入滚动组件
import Scroll from "vue-seamless-scroll";
export default {
  name: "",
  data() {
    return {
      activeName: "visite",
      //日历的收集数据,v-model双向绑定
      arr: [],
      //滚动组件需要的假的数据
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第六行无缝滚动第六行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第七行无缝滚动第七行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第八行无缝滚动第八行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第九行无缝滚动第九行",
          date: "2017-12-16",
        },
      ],
      //属性:存储echarts实例
      mycharts: null,
      //存储来自于服务器访问量与销售额的数据
      chartsData: {},
    };
  },
  methods: {
    //今日按钮的回调
    setToday() {
      //日期相关的插件:moment|dayjs和你们学习moment几乎一模一样！！！
      //获取当前时间  格式：Y M D
      let start = dayjs().format("YYYY-MM-DD");
      let end = dayjs().format("YYYY-MM-DD");
      this.arr = [start, end];
    },
    setWeek() {
      //本周周一的日期
      let start = dayjs().day(-6).format("YYYY-MM-DD");
      //本周周日的日期
      let end = dayjs().day(0).format("YYYY-MM-DD");
      this.arr = [start, end];
    },
    setMonth() {
      //获取本月1号日期和本月最后一天日期
      let start = dayjs().startOf("month").format("YYYY-MM-DD");
      let end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.arr = [start, end];
    },
    setYear() {
      let start = dayjs().startOf("year").format("YYYY-MM-DD");
      let end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.arr = [start, end];
    },
    setBar() {
      //第一步:初始化echarts实例
      this.mycharts = echarts.init(this.$refs.bar);
      //第二步:配置项
      let option = {
        //标题
        title: {
          //  text:this.activeName=="sale"?'销售额':'访问量',//这里你不能这么书写,因为mounted只是执行一次！！！
          text: "访问量",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "中国",
              "美国",
              "俄罗斯",
              "韩国",
              "奥地利",
              "日本",
              "巴基斯坦",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [],
          },
        ],
      };
      //设置配置项
      this.mycharts.setOption(option);
      //图标自适应
      window.addEventListener('resize',()=>{
        this.mycharts.resize();//图标自适应
      })
    },
  },
  components: {
    Scroll,
  },
  //组件挂载完毕
  mounted() {
    //初始化柱状图
    this.setBar();
    //模拟来自于服务器的数据----向服务器发请求,一般都是在mounted发请求
    setTimeout(() => {
      //模拟获取来自于服务器的柱状图的数据
      this.chartsData = {
        visite: [10, 20, 30, 40, 50, 60, 70],
        sale: [99, 27, 88, 54, 123, 88, 33],
      };
    }, 1000);
  },
  watch: {
    //监听选项卡收集的数据
    activeName() {
      //重新设置配置项,可以多次调用,如果出现相同的配置项，在进行修改！！！
      this.mycharts.setOption({
        title: {
          text: this.activeName == "sale" ? "销售额" : "访问量",
        },
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data:this.activeName=='sale'?this.chartsData.sale:this.chartsData.visite
          },
        ],
      });
    },
    //监听柱状图的数据的变化---代表服务器的数据回来了
    chartsData() {
      //服务器数据回来，刚开始的时候展示访问量的数据
      this.mycharts.setOption({
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: this.chartsData.visite,
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  position: relative;
  .right {
    position: absolute;
    right: 0px;
    top: 5px;
    span {
      line-height: 30px;
      margin: 0px 10px;
    }
  }
}
.seamless-warp {
  height: 229px;
  overflow: hidden;
}
.item {
  list-style: none;
}
.charts {
  width: 100%;
  height: 229px;
}
</style>

